<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>记事本练习</title>
        <link rel="stylesheet" href="./assets/css/common.css">
        <script src="./assets/js/vue.js"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
<!-- 引入列表项组件 -->
<script src="./components/list/item.js"></script>
<!-- 引入左右卡片的组件 -->
<script src="./components/cards/left-card.js"></script>
<script src="./components/cards/right-card.js"></script>
<!-- 引入上中下 layout -->
<script src="./components/header-bar.js"></script>
<script src="./components/content-bar.js"></script>
<script src="./components/footer-bar.js"></script>
<script>
// 主组件
const Main = {
    components:{
        HeaderBar,
        ContentBar,
        FooterBar,
    },
    template:`
        <header-bar></header-bar>
        <content-bar></content-bar>
        <footer-bar></footer-bar>
    `
}
Vue.createApp(Main).mount('#app')
/*
// vue3
Vue.createApp({
    data(){
        return {
            msg:""
        }
    }
}) // vue3的这个{} 就是组件
// vue2
new Vue({
    data:{
        
    }
})       // vue2的这个{} config option object

*/
</script>